<div class="component-viewer-header-bar">
  <div class="component-viewer-header-component">
    {{#unless state.removed}}
      {{#if component.projectName}}
        <div class="component-viewer-header-component-project">
          {{qualifierIcon 'TRK'}}
          <a class="link-action" href="{{dashboardUrl component.project}}">{{component.projectName}}</a>
          {{#if component.subProjectName}}
            / <a class="link-action" href="{{dashboardUrl component.subProject}}">{{component.subProjectName}}</a>
          {{/if}}
        </div>
      {{/if}}

      <div class="component-viewer-header-component-name">
        {{qualifierIcon component.q}} {{default component.path component.longName}}

        {{#if state.canMarkAsFavourite}}
          <a class="js-favorite component-viewer-header-favorite"
             title="{{#if component.fav}}{{t 'click_to_remove_from_favorites'}}{{else}}{{t 'click_to_add_to_favorites'}}{{/if}}">
            <i class="{{#if component.fav}}icon-favorite{{else}}icon-not-favorite{{/if}}"></i>
          </a>
        {{/if}}
      </div>
    {{else}}
      <div class="component-viewer-header-component-project removed">{{state.removedMessage}}</div>
    {{/unless}}
  </div>

  {{#unless state.removed}}
    <a class="js-actions component-viewer-header-actions" title="{{t 'component_viewer.more_actions'}}">
      <i class="icon-list"></i>
    </a>

    <div class="component-viewer-header-measures">
      {{#if component.isUnitTest}}
        <div class="component-viewer-header-measures-scope">
          <a data-scope="tests" class="component-viewer-header-measures-expand js-header-tab-tests">
            <div class="component-viewer-header-measure">
              <span class="component-viewer-header-measure-value">{{component.measures.fTests}}</span>
              <span class="component-viewer-header-measure-label">{{t 'metric.tests.name'}}</span>
            </div>
            <i class="icon-dropdown"></i>
          </a>
        </div>
      {{/if}}

      {{#unless component.isUnitTest}}
        <div class="component-viewer-header-measures-scope">
          <span data-scope="basic" class="js-toggle-coverage component-viewer-header-measures-toggle-scope inactive"></span>
          <a data-scope="basic" class="component-viewer-header-measures-expand js-header-tab-basic">
            <div class="component-viewer-header-measure">
              <span class="component-viewer-header-measure-value">{{default component.measures.fNcloc '–'}}</span>
              <span class="component-viewer-header-measure-label">{{t 'metric.ncloc.name'}}</span>
            </div>
            <i class="icon-dropdown"></i>
          </a>
        </div>
      {{/unless}}

      <div class="component-viewer-header-measures-scope">
        <a data-scope="issues" class="component-viewer-header-measures-expand js-header-tab-issues">
          {{#if component.measures.fSqaleRating}}
            <div class="component-viewer-header-measure">
              <span class="rating rating-{{component.measures.fSqaleRating}}"
                    {{#if component.measures.fSqaleDebtRatio}}title="{{t 'metric.sqale_debt_ratio.name'}}: {{component.measures.fSqaleDebtRatio}}"{{/if}}>
                {{component.measures.fSqaleRating}}
              </span>
            </div>
          {{/if}}
          <div class="component-viewer-header-measure">
            <span class="component-viewer-header-measure-value">{{default component.measures.fDebt '0'}}</span>
            <span class="component-viewer-header-measure-label">{{t 'component_viewer.header.debt'}}</span>
          </div>
          {{#if component.measures.fIssues}}
            <div class="component-viewer-header-measure">
              <span class="component-viewer-header-measure-value">{{component.measures.fIssues}}</span>
              <span class="component-viewer-header-measure-label">{{t 'metric.violations.name'}}</span>
            </div>
          {{/if}}
          {{#if component.measures.fIssues}}
            <div class="component-viewer-header-measure">
              <div class="component-viewer-header-measure-issues">
                <div class="component-viewer-header-measure-issue s-blocker"
                     style="width: {{percent component.measures.fBlockerIssues component.measures.maxIssues}};"></div>
                <div class="component-viewer-header-measure-issue s-critical"
                     style="width: {{percent component.measures.fCriticalIssues component.measures.maxIssues}};"></div>
                <div class="component-viewer-header-measure-issue s-major"
                     style="width: {{percent component.measures.fMajorIssues component.measures.maxIssues}};"></div>
                <div class="component-viewer-header-measure-issue s-minor"
                     style="width: {{percent component.measures.fMinorIssues component.measures.maxIssues}};"></div>
                <div class="component-viewer-header-measure-issue s-info"
                     style="width: {{percent component.measures.fInfoIssues component.measures.maxIssues}};"></div>
              </div>
            </div>
          {{/if}}
          <i class="icon-dropdown"></i>
        </a>
        <a data-scope="issues" title="{{t 'component_viewer.header.toggle_issues'}}"
           class="js-toggle-issues component-viewer-header-measures-toggle-scope {{#if settings.issues}}active{{/if}}"></a>
      </div>

      {{#inArray state.tabs 'coverage'}}
        <div class="component-viewer-header-measures-scope">
          <a data-scope="coverage" class="component-viewer-header-measures-expand js-header-tab-coverage">
              <div class="component-viewer-header-measure">
                <span class="component-viewer-header-measure-value">{{default component.measures.fCoverage '–'}}</span>
                <span class="component-viewer-header-measure-label">{{t 'metric.coverage.name'}}</span>
              </div>
            <i class="icon-dropdown"></i>
          </a>
          <a data-scope="coverage" title="{{t 'component_viewer.header.toggle_coverage'}}"
             class="js-toggle-coverage component-viewer-header-measures-toggle-scope {{#if settings.coverage}}active{{/if}}"></a>
        </div>
      {{/inArray}}

      {{#inArray state.tabs 'duplications'}}
        <div class="component-viewer-header-measures-scope">
          <a data-scope="duplications" class="component-viewer-header-measures-expand js-header-tab-duplications">
              <div class="component-viewer-header-measure">
                <span class="component-viewer-header-measure-value">{{default component.measures.fDuplicationDensity '–'}}</span>
                <span class="component-viewer-header-measure-label">{{t 'metric.duplicated_lines_density.name'}}</span>
              </div>
            <i class="icon-dropdown"></i>
          </a>
          <a data-scope="duplications" title="{{t 'component_viewer.header.toggle_duplications'}}"
             class="js-toggle-duplications component-viewer-header-measures-toggle-scope {{#if settings.duplications}}active{{/if}}"></a>
        </div>
      {{/inArray}}

      {{#inArray state.tabs 'scm'}}
        <div class="component-viewer-header-measures-scope">
          <a data-scope="scm" class="component-viewer-header-measures-expand js-header-tab-scm">
            <div class="component-viewer-header-measure">
              <span class="component-viewer-header-measure-value"><i class="icon-calendar"></i></span>
              <span class="component-viewer-header-measure-label">SCM</span>
            </div>
            <i class="icon-dropdown"></i>
          </a>
          <a data-scope="scm" title="{{t 'component_viewer.header.toggle_scm'}}"
             class="js-toggle-scm component-viewer-header-measures-toggle-scope {{#if settings.scm}}active{{/if}}"></a>
        </div>
      {{/inArray}}
    </div>
  {{/unless}}
</div>

<div class="component-viewer-header-expanded-bar"></div>
